<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { roleStore } from '@/stores/role'
import { headersStore } from '@/stores/apiHeader'
// 各区收入占比
import AreaIncomeRatio from '@/components/PermissionsModule/Finance/components/AreaIncomeRatio.vue'
// 全球（4月）收入额与利润率
import FinancialRevenueLeft from '@/components/Echart/flexGlobal/FinancialRevenueLeft.vue'
// 收入同环比增长情况
import IncomeGrowthRateMoM from '@/components/PermissionsModule/Finance/components/IncomeGrowthRateMoM.vue'
// 收入同比增长情况
import IncomeYoYIncrease from '@/components/PermissionsModule/Finance/components/IncomeYoYIncrease.vue'
// 收入环比增长情况
import IncomeHb from '@/components/PermissionsModule/Finance/components/IncomeHb.vue'
// 收入趋势
import RevenueTrend from '@/components/PermissionsModule/Finance/components/RevenueTrend.vue'
//累计收入
import CumulativeRevenue from '@/components/Echart/flexGlobal/CumulativeRevenue.vue'

const store = roleStore() as any

const { financeLevel } = store

const rule = ref() // 1 普通 2 中级 3 高级
const info = () => {
  rule.value = financeLevel
}
info()

// 1 全球 2 区域 3 国家
const newRole = ref(0)
newRole.value = financeLevel // 初始化面板权限
//获取当前月份
const month = computed(() => {
  return headersStore().month
})
// 区分全球区域对比或国家对比  0各个区域，1 各个国家 默认空
const every_code = computed(() => {
  return headersStore().every_code
})
// 深度监听 store.panelPermissions
watch(
  () => store.financeLevel,
  (newVal) => {
    newRole.value = newVal
  }
)
const props = defineProps({
  showRemainingComponents: {
    type: Boolean,
    default: false,
  },
})
</script>

<template>
  <FinancialRevenueLeft
    v-if="newRole != 0 && month !== '00' && every_code == ''"
  />
  <CumulativeRevenue v-if="newRole != 0 && month == '00' && every_code == ''" />
  <RevenueTrend v-if="newRole != 0 && month == '00'" />
  <IncomeGrowthRateMoM
    v-if="newRole != 0 && month !== '00' && every_code == ''"
  />
  <AreaIncomeRatio v-if="newRole <= 2 && every_code != ''" />
  <IncomeYoYIncrease v-if="newRole != 0 && every_code == '' && month == '00'" />
  <IncomeHb v-if="newRole != 0 && month !== '00' && every_code != ''" />
  <div v-if="showRemainingComponents">
    <IncomeYoYIncrease v-if="newRole != 0" />
  </div>
</template>
<style lang="scss" scoped></style>
